<template>
    <div id="box">
      <div class="bottom-top">
        <el-row>
          <el-col :span="3"
            ><div class="grid-content bg-purple">
              <ul class="bottomThing">
                <p>订购方式</p>
                <li>
                  <router-link class="contents" to="">在线订购</router-link>
                </li>
                <li>
                  <router-link class="contents" to="">电话订购</router-link>
                </li>
                <li>
                  <router-link class="contents" to="">上门订购</router-link>
                </li>
                <li>
                  <router-link class="contents" to="">大客户团体订购</router-link>
                </li>
                <li>
                  <router-link class="contents" to="">大麦超级票订购</router-link>
                </li>
              </ul>
            </div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple-light">
              <ul class="bottomThing">
                <p>配送方式</p>
                <li>
                  <router-link class="contents" to="">送货上门</router-link>
                </li>
                <li>
                  <router-link class="contents" to="">电子票</router-link>
                </li>
                <li>
                  <router-link class="contents" to="">上门自取</router-link>
                </li>
                <li>
                  <router-link class="contents" to="">大麦自助机换票</router-link>
                </li>
              </ul>
            </div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">
              <ul class="bottomThing">
                <p>支付方式</p>
                <li>
                  <router-link class="contents" to="">在线支付</router-link>
                </li>
                <li>
                  <router-link class="contents" to="">柜台付款</router-link>
                </li>
              </ul>
            </div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple-light">
              <ul class="bottomThing">
                <p>大麦网微信</p>
                <li>
                  <img
                    src="../../../public/footer/TB1TBEJSkvoK1RjSZFNXXcxMVXa-280-280.jpg"
                    alt=""
                    srcset=""
                  />
                </li>
              </ul></div
          ></el-col>
          <el-col :span="3"
            ><div class="grid-content bg-purple">
              <ul class="bottomThing">
                <p>大麦网触屏版</p>
                <li>
                  <img
                    src="../../../public/footer/TB1TBEJSkvoK1RjSZFNXXcxMVXa-280-280.jpg"
                    alt=""
                    srcset=""
                  />
                </li>
              </ul></div
          ></el-col>
          <el-col :span="3"
            ><div class="grid-content bg-purple-light">
              <ul class="bottomThing">
                <p>账户安全</p>
                <li>
                  <router-link class="contents" to="">找回密码</router-link>
                </li>
                <li>
                  <router-link class="contents" to="">账户注册</router-link>
                </li>
                <li>
                  <router-link class="contents" to="">账户绑定</router-link>
                </li>
                <li>
                  <router-link class="contents" to="">SSL安全证书</router-link>
                </li>
              </ul>
            </div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">
              <ul class="bottomThing">
                <p>配送方式</p>
                <li>
                  <router-link class="contents" to="">退换及缺货说明</router-link>
                </li>
                <li>
                  <router-link class="contents" to="">发票帮助</router-link>
                </li>
                <li>
                  <router-link class="contents" to="">订票服务条款</router-link>
                </li>
              </ul>
            </div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple-light">
              <ul class="bottomThing">
                <p>特色服务</p>
                <li>
                  <router-link class="contents" to="">演出订阅</router-link>
                </li>
              </ul>
            </div></el-col
          >
        </el-row>
      </div>
  
      <div class="bottom-text">
        <ul>
          <li>
            <router-link class="btext" to="">公司介绍</router-link>
          </li>
          |
          <li>
            <router-link class="btext" to="">品牌识别</router-link>
          </li>
          |
          <li>
            <router-link class="btext" to="">企业荣誉</router-link>
          </li>
          |
          <li>
            <router-link class="btext" to="">隐私声明</router-link>
          </li>
          |
          <li>
            <router-link class="btext" to="">联系及合作</router-link>
          </li>
          |
          <li>
            <router-link class="btext" to="">招聘信息</router-link>
          </li>
          |
          <li>
            <router-link class="btext" to="">网站地图</router-link>
          </li>
          |
          <li>
            <router-link class="btext" to="">友情链接</router-link>
          </li>
          |
          <li>
            <router-link class="btext" to="">公司大事记</router-link>
          </li>
        </ul>
      </div>
      <div class="bottom-icon">
        <img src="../../../public/footer/TB1ZO80pyOYBuNjSsD4XXbSkFXa-141-41.png" alt="" srcset="" />
        <img src="../../../public/footer/TB1Y580pyOYBuNjSsD4XXbSkFXa-83-50.png" alt="" srcset="" />
        <img src="../../../public/footer/TB1ZO80pyOYBuNjSsD4XXbSkFXa-141-41.png" alt="" srcset="" />
        <img src="../../../public/footer/TB1Y580pyOYBuNjSsD4XXbSkFXa-83-50.png" alt="" srcset="" />
        <img src="../../../public/footer/TB1ZO80pyOYBuNjSsD4XXbSkFXa-141-41.png" alt="" srcset="" />
        <img src="../../../public/footer/TB1Y580pyOYBuNjSsD4XXbSkFXa-83-50.png" alt="" srcset="" />
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "Footers_zm",
    data() {
      return {};
    },
    methods: {},
    components: {},
  };
  </script>
  
  <style scoped>
  #box {
    overflow: hidden;
  }
  .bottom-icon {
    width: 800px;
    margin: 30px auto;
    margin-bottom: 50px;
  }
  .bottom-icon img {
    margin-right: 20px;
  }
  .bottom-text {
    width: 900px;
    margin: 0 auto;
  }
  .bottom-text ul li {
    display: inline-block;
  }
  .bottom-text ul li .btext {
    color: black;
    text-decoration: none;
  }
  li {
    list-style: none;
    margin: 5px;
  }
  
  .bottom-top {
    border-bottom: 2px #ff3c1b solid;
  }
  .bottomThing li {
    line-height: 25px;
    font-size: 12px;
  }
  .bottomThing li img {
    width: 100px;
  }
  .bottomThing li .contents {
    color: black;
    text-decoration: none;
  }
  /* .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  } */
  /* .grid-content {
    border-radius: 4px;
    min-height: 36px;
  } */
  #box {
    margin: 0 auto;
    width: 1200px;
    background-color: rgb(195, 195, 195);
  }
  </style>
  
  